<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加文章</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
        name="viewport">
    <link href="/static/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="/static/admin/style/admin.css" media="all" rel="stylesheet">
    <style>
        .add_order .layui-form-label {
            width: 150px;
        }

        .add_order .layui-input-block {
            margin-left: 180px;
        }
    </style>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body add_order">
                        <form action="" class="layui-form" lay-filter="component-form-element">
                            <div class="layui-row layui-col-space10 layui-form-item">
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">栏目：</label>
                                    <div class="layui-input-block">
                                        <select name="catid">
                                            {volist name="cateList" id="vo"}
                                            <option value="{$vo.id}">{$vo.catname}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">文章标题：</label>
                                    <div class="layui-input-inline" style="width: 600px;">
                                        <input autocomplete="off" class="layui-input" lay-verify="required" name="title"
                                            placeholder="" type="text">
                                    </div>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <input type="text" value="" name="color" placeholder="请选择颜色" class="layui-input"
                                            id="test-form-input">
                                    </div>
                                    <div class="layui-inline" style="left: -11px;">
                                        <div id="test-form"></div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">图片</label>
                                    <a class="layui-btn" id="image" style="float: left;"><i
                                            class="layui-icon">&#xe67c;</i>上传图片</a>
                                    <div class="layui-input-block" style="margin-left: 295px;">
                                        <input type="text" name="pic" value="" class="layui-input"
                                            style="position: absolute;left: 0;top: 0;">
                                    </div>
                                    <div class="layui-form-item" style="margin-top: 5px;">
                                        <img style="margin-left: 180px;" id="img" src="" width="200">
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">关键字：</label>
                                    <div class="layui-input-inline" style="width: 600px">
                                        <input autocomplete="off" class="layui-input" name="keyword"
                                            placeholder="用英文逗号隔开" type="text">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">用英文逗号隔开</div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">简介：</label>
                                        <div class="layui-input-block">
                                            <textarea class="layui-textarea" name="description"
                                                placeholder=""></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">点击数：</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <input autocomplete="off" class="layui-input" name="onclick" placeholder=""
                                            type="text">
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">文章内容：</label>
                                        <div class="layui-input-block">
                                            <textarea name="content" id="content" lay-verify="required"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md12">
                                    <label class="layui-form-label">是否发布</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="status" value="1" title="是" checked="">
                                        <input type="radio" name="status" value="0" title="否">
                                    </div>
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-filter="component-form-element" lay-submit>立即提交
                                    </button>
                                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/common/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/static/admin/ueditor/ueditor.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/static/admin/' //静态资源所在路径
        }).use(['form', 'layer', 'upload', 'colorpicker'], function () {
            var $ = layui.$,
                admin = layui.admin,
                element = layui.element,
                layer = layui.layer,
                upload = layui.upload,
                colorpicker = layui.colorpicker,
                form = layui.form;

            var ue = UE.getEditor('content');
            ue.ready(function () {
                ue.setHeight(400);
            });
            colorpicker.render({
                elem: '#test-form',
                color: '#ff0000',
                done: function (color) {
                    $('#test-form-input').val(color);
                }
            });

            upload.render({
                url: '{:url("article/uploadPic")}',
                elem: '#image',
                ext: 'jpg|png|gif',
                area: ['500', '500px'],
                before: function (input) {
                    loading = layer.load(2, {
                        shade: [0.2, '#000']
                    });
                },
                done: function (res) {
                    layer.close(loading);
                    $('input[name=pic]').val(res.data);
                    img.src = res.data;
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    });
                }
            });


            form.on('submit(component-form-element)', function (data) {
                $.post("{:url('article/add')}", data.field, function (res) {
                    if (0 == res.code) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            window.parent.renderTable();
                        }, 200);
                    } else {
                        layer.alert(res.msg, {
                            'title': '添加错误',
                            'icon': 2
                        });
                    }
                }, 'json');
                return false;
            });
        });
    </script>
</body>

</html>